<template>
  <el-form
    ref="ruleFormRef"
    :model="ruleForm"
    label-width="120px"
    class="demo-ruleForm"
    size="default"
    status-icon
  >
    <el-form-item label="赠送积分">
      <el-input v-model="ruleForm.giftPoint" />
    </el-form-item>
    <el-form-item label="赠送成长值" row="2">
      <el-input v-model="ruleForm.giftGrowth" type="textarea" />
    </el-form-item>
    <el-form-item label="积分购买权限">
      <el-input v-model="ruleForm.usePointLimit" />
    </el-form-item>
    <!-- 是否为预告商品：0->不是false；1->是ture previewStatus-->
    <el-form-item label="预告商品">
      <el-switch
        :active-value="1"
        :inactive-value="0"
        v-model="ruleForm.previewStatus"
      />
    </el-form-item>
    <!-- publishStatus上架状态：0->下架；1->上架 -->
    <el-form-item label="商品上架">
      <el-switch
        :active-value="1"
        :inactive-value="0"
        v-model="ruleForm.publishStatus"
      />
    </el-form-item>
    <!-- 推荐状态；0->不推荐；1->推荐 -->
    <el-form-item label="商品推荐">
      <el-switch
        inactive-text="新品"
        :active-value="1"
        :inactive-value="0"
        v-model="ruleForm.newStatus"
      />
      <el-switch
        :active-value="1"
        :inactive-value="0"
        inactive-text="推荐"
        v-model="ruleForm.recommandStatus"
      />
    </el-form-item>
    <!-- 多选框 -->
    <!-- serviceIds 以逗号分割的产品服务：1->无忧退货；2->快速退款；3->免费包邮 -->
    <el-form-item label="服务保证">
      <el-checkbox-group v-model="ruleForm.serviceIds">
        <el-checkbox label="无优退款" name="serviceIds" />
        <el-checkbox label="快速退款" name="serviceIds" />
        <el-checkbox label="免费包邮" name="serviceIds" />
      </el-checkbox-group>
    </el-form-item>
    <el-form-item label="详细页标题">
      <el-input v-model="ruleForm.detailTitle" />
    </el-form-item>
    <el-form-item label="详细页描述">
      <el-input v-model="ruleForm.detailDesc" />
    </el-form-item>
    <el-form-item label="商品关键字">
      <el-input v-model="ruleForm.keywords" />
    </el-form-item>
    <el-form-item label="商品备注">
      <el-input row="2" v-model="ruleForm.note" type="textarea" />
    </el-form-item>
    <!-- 优惠方式  promotionType 促销类型：0->没有促销使用原价;1->使用促销价；2->使用会员价；3->使用阶梯价格；4->使用满减价格；5->限时购-->
    <el-form-item label="选择优惠方式">
      <el-radio-group v-model="ruleForm.promotionType">
        <el-radio-button
          v-for="item in cities"
          :key="item.label"
          :label="item.value"
          >{{ item.label }}</el-radio-button
        >
      </el-radio-group>
    </el-form-item>
    <!-- 点击第几个显示哪一个板块 -->
    <div v-show="ruleForm.promotionType == 1">
      <div class="special-item">
        <span>开始时间:</span>
        <el-date-picker
          v-model="ruleForm.promotionStartTime"
          value-format="YYYY-MM-DD HH:mm:ss"
          type="datetime"
          placeholder="选择开始时间"
        />
      </div>
      <div class="special-item">
        <span>结束时间:</span>
        <el-date-picker
          v-model="ruleForm.promotionEndTime"
          value-format="YYYY-MM-DD HH:mm:ss"
          type="datetime"
          placeholder="选择结束时间"
        />
      </div>
      <div class="special-item">
        <span>促销价格:</span>
        <el-input
          v-model="ruleForm.promotionPrice"
          placeholder="输入促销价格"
        />
      </div>
    </div>
    <div v-show="ruleForm.promotionType == 2">
      <div class="special-item" v-for="item in ruleForm.memberPriceList">
        <span>{{ item.memberLevelName }}</span>
        <el-input v-model="item.memberPrice" />
      </div>
    </div>
    <div class="special-item" v-show="ruleForm.promotionType == 3">
      <el-table
        :border="true"
        :data="ruleForm.productLadderList"
        style="width: 100%"
      >
        <el-table-column label="数量" width="150">
          <template #default="{ row }">
            <el-input class="box" v-model="row.count" />
          </template>
        </el-table-column>
        <el-table-column label="折扣" width="150">
          <template #default="{ row }">
            <el-input class="box" v-model="row.discount" />
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180">
          <template #default>
            <el-button type="primary" size="small" @click="handleClick"
              >删除</el-button
            >
            <el-button @click="addhandleClick" type="primary" size="small"
              >添加</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="special-item" v-show="ruleForm.promotionType == 4">
      <el-table
        :border="true"
        :data="ruleForm.productFullReductionList"
        style="width: 100%"
      >
        <el-table-column label="满" width="150">
          <template #default="{ row }">
            <el-input class="box" v-model="row.fullPrice" />
          </template>
        </el-table-column>
        <el-table-column label="立减" width="150">
          <template #default="{ row }">
            <el-input class="box" v-model="row.reducePrice" />
          </template>
        </el-table-column>

        <el-table-column label="操作" width="180">
          <template #default>
            <el-button type="primary" size="small" @click="delhandleClick"
              >删除</el-button
            >
            <el-button @click="addhandleClickList" type="primary" size="small"
              >添加</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 按钮 -->
    <el-button
      style="margin-left: 130px; margin-top: 5px"
      @click="chanddis"
      type="primary"
      >上一步，填写商品促销</el-button
    >
    <el-button
      style="margin-left: 180px; margin-top: 5px"
      @click="chandnext"
      type="primary"
      >下一步，填写商品属性</el-button
    >
  </el-form>
</template>

<script setup lang="ts">
import { reactive } from "vue";

// 表单的校验
interface RuleForm {
  giftPoint: number;
  giftGrowth: number;
  usePointLimit: number;
  previewStatus: number;
  publishStatus: number;
  newStatus: number;
  recommandStatus: number;
  serviceIds: string;
  detailTitle: string;
  detailDesc: string;
  keywords: string;
  note: string;
  promotionType: string | number;
  // 特惠促销
  promotionPrice: number;
  promotionStartTime: string;
  promotionEndTime: string;
  // 会员价格
  memberPriceList: any;
  // 阶梯价格
  productLadderList: any;
  // 满减数据
  productFullReductionList: any;
}

// 表单数据
const ruleForm = reactive<RuleForm>({
  giftPoint: 0,
  giftGrowth: 0,
  usePointLimit: 0,
  previewStatus: 0,
  publishStatus: 0,
  newStatus: 0,
  recommandStatus: 0,
  // 服务政策暂时不知道
  serviceIds: "",
  detailTitle: "",
  detailDesc: "",
  keywords: "",
  note: "",
  // 选择优惠的方式
  promotionType: 0, // 绑定数值，表示选择的选项
  // 特惠促销
  promotionPrice: 0,
  promotionStartTime: "",
  promotionEndTime: "",
  // 会员价格
  memberPriceList: [],
  // 阶梯价格
  productLadderList: [],
  // 满减价格
  productFullReductionList: [],
});
const cities = reactive([
  { value: 0, label: "无优惠" },
  { value: 1, label: "使用促销价" },
  { value: 2, label: "使用会员价" },
  { value: 3, label: "使用阶梯价格" },
  { value: 4, label: "使用满减价格" },
]);

// 点击上一页回到上一页
const chanddis = () => {
  emits("bingnext", 0);
};
// 会员价格
ruleForm.memberPriceList = [
  {
    id: 1,
    memberLevelId: 1,
    memberLevelName: "黄金会员",
    memberPrice: null,
    productId: null,
  },
  {
    id: 2,
    memberLevelId: 2,
    memberLevelName: "白金会员",
    memberPrice: null,
    productId: null,
  },
  {
    id: 3,
    memberLevelId: 3,
    memberLevelName: "钻石会员",
    memberPrice: null,
    productId: null,
  },
];
ruleForm.productLadderList = [
  {
    count: 0,
    discount: 0,
    price: 0,
  },
];
// 点击添加删除的方法
const handleClick = () => {
  if (ruleForm.productLadderList.length != 1) {
    ruleForm.productLadderList.pop();
  }
};
const addhandleClick = () => {
  if (ruleForm.productLadderList.length < 3) {
    ruleForm.productLadderList.unshift({
      count: 0,
      discount: 0,
      price: 0,
    });
  }
};

// 满减价格的数据
ruleForm.productFullReductionList = [
  {
    fullPrice: 0,
    reducePrice: 0,
  },
];
// 删除或者添加数据
const delhandleClick = () => {
  if (ruleForm.productFullReductionList.length != 1) {
    ruleForm.productFullReductionList.pop();
  }
};
const addhandleClickList = () => {
  if (ruleForm.productFullReductionList.length < 3) {
    ruleForm.productFullReductionList.unshift({
      fullPrice: 0,
      reducePrice: 0,
    });
  }
};
// 表单的传值
// 接收父组件传过来的方法
const emits = defineEmits<{
  (e: "bingnext", a: number): void;
  (e: "fromNext", a: object): void;
}>();
// 点击按钮,传值到下一页面
const chandnext = () => {
  emits("fromNext", ruleForm);
  emits("bingnext", 2);
};
</script>

<style scoped lang="less">
.special-item {
  // width: 100%;
  margin-left: 180px;
  margin-bottom: 10px;
  span {
    margin-right: 15px;
  }
}
.el-input.el-input--default {
  width: 220px;
}
// 表格
.el-table_1_column_3.el-table__cell {
  display: flex;
}
// :deep(.el-input.el-input--default .cell .el-input .el-input--default) {
//   width: 111px;
// }
.box {
  width: 100px !important;
}
// .cell {
//   width: 20px !important;
// }
</style>
